<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useMemberStore } from '@/stores'
import { postPayApi } from '@/pagesGoods/services/pay'
import { MyShowModal, SwitchingTime, Toast } from '@/utils/tools'
import PayPopup from './payPopup.vue'

const props = defineProps({
  status: {
    type: String,
    default: '',
  },
  orderStatus: {
    type: Number,
    default: 0,
  },
  orderId: {
    type: String,
    default: '',
  },
  awaitNum: {
    type: Number,
    default: 0,
  },
  isCreationStatus: {
    type: Boolean,
    default: false,
  },
  orderType: {
    type: String,
    default: '',
  },
  goodsType: {
    type: Number,
    default: undefined,
  },
  enterpriseTime: {
    type: String,
    default: '',
  },
  saleEndTime: {
    type: String,
    default: '',
  },
  endTime: {
    type: Number,
    default: 0,
  },
  isButton: {
    type: Boolean,
    default: false,
  },
  totalPrice: {
    type: Number,
    default: 0,
  },
  couponDiscountedPrice: {
    type: Number,
    default: 0,
  },
  replacementState: {
    type: Number,
  },
  sumNum: {
    type: Number,
    default: 0,
  },
  isUserOrderStatusBox: {
    type: Boolean,
    default: false,
  },
  isPickUp: {
    type: Number,
    default: 0,
  },
  operationalOnlineStatus: {
    type: Number,
  },
  type: {
    type: String,
    default: '',
  },
  tmplIds: {
    type: Array,
    default: () => [],
  },
})
const memberStore = useMemberStore()
const loadingTopay = ref(false)
const ActivityPopupRef = ref() // 客服弹出层实例 ref

const payPopupRef = ref()
const handleSelect = (flag: number) => {
  // 余额支付
  if (!flag) {
    if (
      Number(memberStore.balanceInfo?.totalBalance) <
      props.totalPrice - props.couponDiscountedPrice
    ) {
      return
    }
    console.log('memberStore.hasPayPasswordFree', memberStore.hasPayPasswordFree)
    console.log('memberStore.hasPayPassword', memberStore.hasPayPassword)
    if (memberStore.hasPayPasswordFree && memberStore.hasPayPassword) {
      if (!loadingTopay.value) {
        payBalance()
      }
    } else if (memberStore.hasPayPassword) {
      loadingTopay.value = true
      passwordPopupRef.value?.open()
    } else {
      const isSetting = memberStore.hasPayPassword ? 0 : 1
      uni.navigateTo({
        url: '/pagesWallet/paymentPassword/paymentPassword?isSetting=' + isSetting + '&isBack=1',
      })
    }
  } else {
    callUpPay()
  }
  payPopupRef.value?.close()
}
/**
 * *  调起支付
 */
const callUpPay = async () => {
  loadingTopay.value = true
  const ret = await checkCouponPackOrderApi({ orderId: props.orderId })
  if (!ret?.data) {
    loadingTopay.value = false
    return
  }
  const res = await postPayApi({
    openId: memberStore.userInfo!.openId,
    orderId: props.orderId,
  })
  if (res.code === 200) {
    wx.requestPayment({
      timeStamp: res.data.timeStamp + '',
      nonceStr: res.data.nonceStr,
      package: res.data.packageValue,
      signType: res.data.signType,
      paySign: res.data.paySign,
      success: async () => {
        emits('refresh')
        setting()
        setTimeout(() => {
          emits('popupOpen')
        }, 500)
      },
      fail: (error) => {
        console.log(error)
      },
      complete: (complete) => {
        loadingTopay.value = false
      },
    })
  } else {
    loadingTopay.value = false
  }
}
// 密码弹窗
const passwordPopupRef = ref()

// 输入支付密码
async function handleInput(inputList: number[]) {
  payBalance(inputList.join(''))
}

// 余额支付
async function payBalance(password?: string) {
  loadingTopay.value = true
  const res = await payBalanceApi({ orderId: props.orderId, password })
  console.log('res', res)
  if (res?.code === 200) {
    emits('refresh')
    passwordPopupRef.value?.close()
    setting()
    setTimeout(() => {
      emits('popupOpen')
    }, 500)
  }
  loadingTopay.value = false
}

const goPay = () => {
  if (props.type) {
    // 跳转支付
    callUpPay()
  } else {
    payPopupRef.value?.open()
  }
}

const setting = () => {
  uni.getSetting({
    withSubscriptions: true,
    success(alwaysRes) {
      uni.requestSubscribeMessage({
        tmplIds: props.tmplIds, // 这里填写你的模板ID数组
        success(res: any) {
          if (res['gN9DKGzX7t6TdIdfN6OCqeBnW1_rq-M2SkPtOiuBP_M'] === 'accept') {
            // 用户同意订阅该模板
            console.log('用户同意订阅TEMPLATE_ID_1')
          }
          if (res['gN9DKGzX7t6TdIdfN6OCqeBnW1_rq-M2SkPtOiuBP_M'] === 'reject') {
            // 用户拒绝订阅该模板
            console.log('用户拒绝订阅TEMPLATE_ID_2')
          }
          if (res['cvXN4cVzVAtR_H6kZz7CN-7CM_dp1cf7OtOW1S9ywcc'] === 'accept') {
            // 用户同意订阅该模板
            console.log('用户同意订阅TEMPLATE_ID_1')
          }
          if (res['cvXN4cVzVAtR_H6kZz7CN-7CM_dp1cf7OtOW1S9ywcc'] === 'reject') {
            // 用户拒绝订阅该模板
            console.log('用户拒绝订阅TEMPLATE_ID_2')
          }
          if (res['WiLg6P_YrOaHXH8wj7BrYmqIkydnFkDfCm_7ymDnT2E'] === 'accept') {
            // 用户同意订阅该模板
            console.log('用户同意订阅优惠券发放通知')
          }
          if (res['WiLg6P_YrOaHXH8wj7BrYmqIkydnFkDfCm_7ymDnT2E'] === 'reject') {
            // 用户拒绝订阅该模板
            console.log('用户拒绝订阅优惠券发放通知')
          }
        },
        fail(err) {
          console.error('订阅消息失败', err)
        },
      })
    },
  })
}

import { postReplaceApi } from '@/services/goods'
/**点击代取触发 */
const replace = () => {
  MyShowModal('您确定要代取吗？').then(async (success: UniApp.ShowModalRes) => {
    if (success.confirm) {
      uni.showLoading({
        title: '加载中···',
        mask: true,
      })
      try {
        const res = await postReplaceApi({ orderId: props.orderId })
        uni.hideLoading()
        if (res.code === 200) {
          emits('refresh')
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        uni.hideLoading()
      }
    }
  })
}
import { postQRCodeApi } from '@/services/goods'
import { onUnload } from '@dcloudio/uni-app'
import { checkCouponPackOrderApi } from '@/services/eat'
import { payBalanceApi } from '@/services/wallet'
import PasswordPopup from '@/components/passwordPopup.vue'
import Password from '@/components/Password.vue'
let QRCodeId = ref('gN9DKGzX7t6TdIdfN6OCqeBnW1_rq-M2SkPtOiuBP_M')
/**
 * *  获取二维码信息
 */
const getQrCode = async () => {
  const codeParm = { orderId: props.orderId }
  const res = await postQRCodeApi(codeParm)
  if (res.code === 200) {
    QRCodeId.value = res.data
  }
}
// 展示的分秒
let m = ref<any>()
let s = ref<any>()
let timeoutId: any = null // 定时器
/**
 * * 支付倒计时
 */
const payCountdown = () => {
  timeoutId = setInterval(() => {
    let currentTime = new Date().getTime()
    let difference = props.endTime - currentTime
    m.value = Math.floor((difference / (1000 * 60)) % 60)
    s.value = Math.floor((difference / 1000) % 60)
    if (difference <= 0 && props.status === 'ToBePaid') {
      clearInterval(timeoutId)
      isStatus()
    }
  }, 1000)
}
/**
 * * 补零后展示的时间
 */
const zeroFillingTime = computed(() => {
  if (m.value === undefined || s.value === undefined) {
    return '00分00秒' // 设置一个默认值
  }
  return `${formatNumber(m.value)}分${formatNumber(s.value)}秒`
})
const formatNumber = (num: number) => {
  return num < 10 ? `0${num}` : `${num}`
}
// 页面卸载删除定时器
onUnload(() => {
  clearInterval(timeoutId)
  clearTimeout(timeId)
})

let timeId: any
/** 支付倒计时结束后 更新页面，并且判断 订单状态是否是 已取消 ；否则一直请求 */
const isStatus = async () => {
  emits('refresh')
  if (props.status !== 'Canceled') {
    timeId = setTimeout(() => {
      isStatus()
    }, 100)
  } else {
    passwordPopupRef.value?.close()
    payPopupRef.value?.close()
  }
}
// 监听订单状态等于待取餐状态，调用取餐码接口；订单状态变为 待支付 的时候就调用支付倒计时
watch(
  () => [props.status, props.orderStatus],
  (newVal) => {
    setTimeout(() => {
      if (newVal[0] === 'AwaitPackage' && newVal[1] === 1) {
        getQrCode()
        getEstimatedTime()
      } else if (newVal[0] === 'AwaitPackage') {
        getEstimatedTime()
      } else if (newVal[0] === 'ToBePaid') {
        payCountdown()
      }
    }, 200)
  },
)

const tipsShow = ref(false)
const customerShow = ref(false)
/**关闭提示 */
const changeTipsShow = (type: boolean) => {
  if (type) {
    customerShow.value = false
    tipsShow.value = !tipsShow.value
  } else {
    tipsShow.value = false
    customerShow.value = !customerShow.value
  }
}

/** 获取到预计做好的时间 */
const getEstimatedTime = () => {
  const currentTime = new Date().getTime()
  // 预计时间只加自己的第一份时间
  const estimatedTime = (props.awaitNum + 1) * 2 * 60000 + currentTime
  console.log(SwitchingTime(estimatedTime, 'HM'))
  return SwitchingTime(estimatedTime, 'HM')
}
/** 动态修改文字颜色 */
const changeColor = () => {
  return props.awaitNum > 10 ? '#FFBD2C' : '#ffc65d'
}
/**点击退款按钮 */
const clickOnRefund = (type: boolean) => {
  emits('cancelPopupOpen')
  emits('changeCancelRefund', type)
}
defineExpose({
  tipsShow,
  customerShow,
})
const emits = defineEmits(['popupOpen', 'refresh', 'changeCancelRefund', 'cancelPopupOpen'])
</script>
<template>
  <view class="goodsStatus">
    <!-- 已完成 -->
    <view class="finish" v-if="props.status === 'Finish'">
      <view class="status">订单已完成</view>
      <view
        class="_statusText"
        v-if="props.isUserOrderStatusBox && props.goodsType !== 2"
        @tap.stop="changeTipsShow(true)"
      >
        <view>请在</view>
        <view class="countDown">{{
          props.orderType === '2'
            ? `${props.enterpriseTime}${props.saleEndTime}`
            : `今日${props.saleEndTime}`
        }}</view>
        <view>前完成取餐</view>
        <view class="_tipsBox iconfont icon_a-zhuyi2">
          <BjsTips :show="tipsShow" textData="逾期订单将自动完成（不退款）" />
        </view>
      </view>
      <view class="fs40 iconfont icon_restaurant theme_text_color" v-if="props.goodsType !== 2">
        <text class="fs44" style="margin-left: 24rpx">{{
          memberStore?.userInfo?.mobile.slice(-4)
        }}</text>
      </view>
      <view class="replaceHint" v-if="!props.isUserOrderStatusBox || props.goodsType === 2"
        >订单已完成，感谢您对麦德范的喜爱与支持~</view
      >
    </view>
    <!-- 已退款 -->
    <view class="completed" v-else-if="props.status === 'Refund'">
      <view class="status">订单已退款</view>
      <view class="statusText">感谢您对麦德范的支持，期待您下次光临</view>
    </view>
    <!-- 退款中 -->
    <view class="completed" v-else-if="props.status === 'APPLY_REFUND'">
      <view class="status">订单正在退款处理中···</view>
      <view class="statusText">感谢您对麦德范的支持，期待您下次光临</view>
    </view>
    <!-- 已取消 -->
    <view class="cancelled" v-else-if="props.status === 'Canceled'">
      <view class="status">订单已取消</view>
      <view class="statusText">已为您取消本次订单，期待您下次光临</view>
    </view>
    <!-- 待支付 -->
    <view class="unpaid" v-else-if="props.status === 'ToBePaid'">
      <view class="status">等待支付</view>
      <view class="money"
        ><text class="icon">￥</text
        >{{ Number(props.totalPrice - props.couponDiscountedPrice).toFixed(2) }}</view
      >
      <view class="statusText">
        <view class="iconfont icon_countDown"></view>
        <text class="countDown">{{ zeroFillingTime }}</text>
        <view class="text">后订单将自动取消</view>
      </view>
      <view class="direction">
        <view class="close" @tap.stop="clickOnRefund(true)">取消订单</view>
        <button class="goTopay" :loading="loadingTopay" :disabled="loadingTopay" @tap.stop="goPay">
          去支付
        </button>
      </view>
    </view>
    <!-- 待取餐 -->
    <view class="mealWaiting" v-else-if="props.status === 'AwaitPackage'">
      <view class="status"> 等待取餐 </view>
      <view class="qrBox">
        <view class="AwaitPackage_close">
          <view class="_statusText" @tap.stop="changeTipsShow(true)">
            <view>请在</view>
            <view class="countDown">{{
              props.orderType === '2'
                ? `${props.enterpriseTime}${props.saleEndTime}`
                : `今日${props.saleEndTime}`
            }}</view>
            <view>前完成取餐</view>
            <view class="_tipsBox iconfont icon_a-zhuyi2">
              <BjsTips :show="tipsShow" textData="逾期订单将自动完成（不退款）" />
            </view>
          </view>
          <button
            class="_close"
            @tap.stop="clickOnRefund(false)"
            v-if="props.isButton && props.orderStatus === 1"
          >
            取消订单
          </button>
          <view
            v-if="props.orderStatus === 2"
            class="fs40 iconfont icon_restaurant theme_text_color"
          >
            <text class="fs44" style="margin-left: 24rpx">{{
              memberStore.userInfo!.mobile.slice(-4)
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 展示给用户看的订单状态 -->
    <view v-if="props.isUserOrderStatusBox && goodsType !== 2" class="mealWaiting">
      <view class="orderStatusBox">
        <view class="orderStatusBoxList">
          <view class="orderStatusBoxItem">
            <image
              class="statusPng"
              :src="`/static/images/goodsDetails/${props.orderStatus !== 1 ? '1_0' : '1_1'}.png`"
              mode="scaleToFill"
            />
            <view class="order_statusText" :class="props.orderStatus === 1 ? 'c0' : ''"
              >已下单</view
            >
          </view>
          <view class="orderStatusBoxItem">
            <image
              class="statusPng"
              :src="`/static/images/goodsDetails/${props.orderStatus !== 2 ? '2_0' : '2_1'}.png`"
              mode="scaleToFill"
            />
            <view class="order_statusText" :class="props.orderStatus === 2 ? 'c0' : ''"
              >制作中</view
            >
          </view>
          <view class="orderStatusBoxItem">
            <image
              class="statusPng"
              :src="`/static/images/goodsDetails/${props.orderStatus !== 3 ? '3_0' : '3_1'}.png`"
              mode="scaleToFill"
            />
            <view class="order_statusText" :class="props.orderStatus === 3 ? 'c0' : ''"
              >请取餐</view
            >
          </view>
          <view class="lineBox">
            <view class="_left" :class="props.orderStatus === 2 ? 'theme_text_color' : ''"
              >·············</view
            >
            <view class="_right" :class="props.orderStatus === 3 ? 'theme_text_color' : ''"
              >·············</view
            >
          </view>
        </view>
        <view class="productionBox" v-if="props.awaitNum && props.orderStatus === 1"
          >前方
          <view class="_num" :style="{ color: changeColor() }"
            >&nbsp;{{ props.awaitNum }}&nbsp;</view
          >
          份制作中，预计等待
          <view class="_num" :style="{ color: changeColor() }">
            &nbsp;{{ props.awaitNum * 2 }}&nbsp;</view
          >
          分钟</view
        >

        <view class="productionBox" v-else-if="!props.awaitNum && props.orderStatus === 1"
          >暂无排队信息，请选择取餐方式
        </view>

        <view class="productionBox" v-else-if="!props.awaitNum && props.orderStatus === 2"
          >正在制作您的餐品，预计
          <view class="_num" :style="{ color: changeColor() }">
            &nbsp;{{ getEstimatedTime() }}&nbsp;</view
          >
          取餐
        </view>

        <view class="productionBox" v-else-if="props.awaitNum && props.orderStatus === 2"
          >前方
          <view class="_num" :style="{ color: changeColor() }"
            >&nbsp;{{ props.awaitNum }}&nbsp;</view
          >
          份制作中，预计
          <view class="_num" :style="{ color: changeColor() }">
            &nbsp;{{ getEstimatedTime() }}&nbsp;</view
          >
          取餐</view
        >
        <view class="productionBox" v-else-if="props.status === 'AwaitPackage' && props.isPickUp"
          >订单已完成，请找线下客服取餐
        </view>
        <view class="productionBox" v-else-if="props.status === 'AwaitPackage' && !props.isPickUp"
          >订单已完成，请及时取餐
        </view>
        <view class="productionBox" v-else-if="props.status === 'Finish' && props.isPickUp"
          >订单已完成，请找线下客服取餐
        </view>
        <view class="productionBox" v-else-if="props.status === 'Finish' && !props.isPickUp"
          >订单已完成，请及时取餐
        </view>
      </view>
    </view>
    <view class="codeBgc" v-if="props.orderStatus === 1 && goodsType !== 2">
      <view class="codeBgcIS">
        <!-- <view class="way">取餐方式1</view> -->
        <view class="codeImage">
          <image src="/static/images/goodsDetails/qrCodeBg.png" mode="scaleToFill"></image>
          <uqrcode
            ref="qrcodeRef"
            canvas-id="qrcode"
            :value="QRCodeId"
            size="276"
            sizeUnit="rpx"
          ></uqrcode>
        </view>
        <view class="tipsUser"> 在设备扫码器反扫二维码 </view>
      </view>
    </view>
    <!-- 客服 -->
    <view @tap.stop="ActivityPopupRef?.open()" class="iconfont icon_kefu"><text>客服</text></view>
    <BjsActivityPopup
      ref="ActivityPopupRef"
      :url="'https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/customer_service.png'"
      :flag="false"
    />
    <PayPopup
      ref="payPopupRef"
      :totalPrice="Number(totalPrice - couponDiscountedPrice)"
      @handleSelect="handleSelect"
    />
    <PasswordPopup ref="passwordPopupRef" @finish="handleInput" @close="loadingTopay = false" />
  </view>
</template>
<style lang="scss" scoped>
.goodsStatus {
  width: 702rpx;
  margin: 0 24rpx;
  padding: 24rpx 28rpx 0rpx;
  border-radius: 16rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  .icon_kefu {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    width: 76rpx;
    height: 76rpx;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 6rpx 0;
    font-size: 36rpx;
    border-radius: 50%;
    color: $uni-color-motif;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    text {
      font-size: 18rpx;
    }
  }
  .finish,
  .cancelled,
  .unpaid,
  .completed,
  .mealWaiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    .status {
      font-size: 36rpx;
      color: #000000e5;
    }
    .statusText {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
      font-size: 22rpx;
      color: #000000e5;
    }
    .recur {
      height: 56rpx;
      line-height: 56rpx;
      padding: 0 24rpx;
      font-size: 24rpx;
      border-radius: 28rpx;
      color: #fff;
      background: $uni-color-motif;
    }
  }
  .mealWaiting {
    .qrBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 12rpx;
      ._statusText {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #000000e5;
        ._tipsBox {
          margin-left: 10rpx;
          font-size: 22rpx;
          position: relative;
        }
      }
      .icon_restaurant {
        margin: 16rpx 0 0 0;
      }
      .AwaitPackage_close {
        width: 622rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1rpx solid #e6e6e6;
        padding-bottom: 24rpx;
        ._close {
          padding: 0 24rpx;
          margin: 26rpx 0 0 0;
          height: 56rpx;
          line-height: 56rpx;
          font-size: 24rpx;
          border-radius: 28rpx;
          box-sizing: border-box;
          color: $uni-color-motif;
          border: 1px solid $uni-color-motif;
          box-sizing: border-box;
          background-color: #fff;
        }
      }
    }
  }
  .finish {
    .replaceHint {
      font-size: 24rpx;
      margin: 24rpx 0rpx 40rpx;
    }
    .icon_restaurant {
      margin: 16rpx 0 0 0;
    }
    ._statusText {
      margin-top: 12rpx;
      display: flex;
      align-items: center;
      font-size: 22rpx;
      color: #000000e5;
      ._tipsBox {
        margin-left: 10rpx;
        font-size: 22rpx;
        position: relative;
      }
    }
  }
}
// 展示给用户看的订单状态
.orderStatusBox {
  width: 690rpx;
  padding: 54rpx 90rpx 0rpx;
  .orderStatusBoxList {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 136rpx;
    .orderStatusBoxItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 136rpx;
      padding-top: 10rpx;
      .statusPng {
        width: 56rpx;
        height: 56rpx;
      }
      .order_statusText {
        font-size: 26rpx;
        color: #999;
        margin-top: 16rpx;
      }
    }
    .lineBox {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 84rpx;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 20rpx;
      ._left,
      ._right {
        color: #dbdbdb;
      }
    }
  }
  .productionBox {
    display: flex;
    justify-content: center;
    border-radius: 200rpx;
    background-color: #f5f5f5;
    color: #000;
    font-size: 26rpx;
    padding: 16rpx 50rpx;
    margin: 24rpx 0rpx 40rpx;
    color: #555555;
    ._num {
      color: $uni-color-motif;
    }
  }
}
//倒计时
.icon_countDown {
  font-size: 40rpx;
  color: #000000e5;
  margin-right: 8rpx;
}

.countDown {
  margin-right: 2rpx;
  font-size: 22rpx;
  color: #fa5151;
}
// 待付款 支付方向
.direction {
  display: flex;
  padding-bottom: 24rpx;
}
.goTopay {
  width: 196rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  border-radius: 200rpx;
  text-align: center;
  color: #fff;
  background-color: $uni-color-motif;
}
// 待取餐
.warning {
  font-size: 22rpx;
  color: #000000e5;
  margin-bottom: 20rpx;
}
.close {
  margin-right: 20rpx;
  width: 196rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  border-radius: 200rpx;
  box-sizing: border-box;
  color: $uni-color-motif;
  border: 1px solid $uni-color-motif;
  text-align: center;
  box-sizing: border-box;
  background-color: rgba(255, 190, 39, 0.1);
}
.codeBgc {
  display: flex;
  justify-content: center;
  width: 702rpx;
  padding: 0 84rpx 26rpx 52rpx;
  border-radius: 0px 0px 16rpx 16rpx;
  position: relative;
  .codeBgcIS {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tipsUser {
      font-size: 28rpx;
      color: #362000;
      margin-top: 20rpx;
      .iconfont {
        font-size: 24rpx;
        color: $uni-color-motif;
      }
    }
    .way {
      width: 160rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #ffc65d;
      color: #fff;
      border-radius: 6rpx;
      margin-bottom: 32rpx;
      font-size: 26rpx;
    }
    .codeImage {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      width: 360rpx;
      height: 360rpx;
      z-index: 1;
      position: relative;
      image {
        width: 360rpx;
        height: 360rpx;
        position: absolute;
        left: 0;
        top: 0;
      }
      ._qrcode {
        width: 360rpx;
        height: 360rpx;
        z-index: 9999;
      }
    }
    .mobileNumber {
      text-align: center;
      height: 72rpx;
      letter-spacing: 8rpx;
      font-size: 56rpx;
      font-weight: 600;
      color: $uni-color-motif;
    }
    .codeText {
      height: 62rpx;
      font-size: 44rpx;
      color: $uni-color-motif;
    }
    .tipsCode {
      font-size: 22rpx;
      color: #00000080;
    }
  }
  .kefu_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .way {
      width: 160rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #ffc65d;
      color: #fff;
      border-radius: 6rpx;
      margin-bottom: 66rpx;
      font-size: 26rpx;
    }
    .kefu_button_box {
      display: flex;
      justify-content: center;
      ._goTopay {
        padding: 0 24rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        border-radius: 28rpx;
        color: #fff;
      }
      //提示盒子
      ._tipsBox {
        margin-left: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color: #b5b6bc;
      }
    }
    .kefu_text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #00000080;
      margin-bottom: 24rpx;
    }
  }
  ._line {
    position: absolute;
    left: 360rpx;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    display: flex;
    flex-direction: column;
    opacity: 0.5;
  }
}
.money {
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 20rpx;
  .icon {
    font-size: 36rpx;
  }
}
</style>
